<script setup>
import RequestItem from "@/coachfinder/components/requests/RequestItem.vue";
import BaseCard from "@/coachfinder/components/ui/BaseCard.vue";
import BaseSpinner from "@/coachfinder/components/ui/BaseSpinner.vue";
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";

const isLoading = ref(false)
const error = ref(null)

const store = useStore();

const receivedRequests = computed(() => {
  return store.getters.requests;
});
const hasRequests = computed(() => {
  return store.getters.hasRequests;
});

const loadRequests = async function loadRequests() {
  isLoading.value = true
  await store.dispatch('fetchRequests')
  isLoading.value = false
}

onMounted(() => {
  loadRequests();
});

</script>

<template>
  <section>
    <BaseCard>
      <header>
        <h2>Requests Received</h2>
      </header>
      <BaseSpinner v-if="isLoading"></BaseSpinner>
      <ul v-else-if="hasRequests && !isLoading">
        <RequestItem
          v-for="request in receivedRequests"
          :key="request.id"
          :email="request.userEmail"
          :message="request.message"
        ></RequestItem>
      </ul>
      <h3 v-else>You haven't received any requests yet!</h3>
    </BaseCard>
  </section>
</template>

<style scoped>
header {
  text-align: center;
}
ul {
  list-style-type: none;
  margin: 2rem auto;
  padding: 0;
  max-width: 30rem;
}
h3 {
  text-align: center;
}
</style>
